<!-- 日志列表模块入口 -->
<!-- 展示全部的已经发布的日志列表信息 -->
<template>
	<div 
		class="log-list">
		<div 
			class="header">

			<div 
				class="collect">
				<div 
					class="collect-item">
					<label for=""> 
						时间： 
					</label>
					<el-date-picker
						v-model="dateTime"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
					>
					</el-date-picker>
				</div>
				<el-button
					@click="ini()"
					type="primary"
					size="small"
				>
					查询
				</el-button>
				<el-button
					@click="exportLog()"
					type="primary"
					size="small"
				>
					导出日志
				</el-button>
			</div>
		</div>

		<!-- 数据展示 -->
		<el-table
			:data="currentPageData"
			element-loading-text="Loading"
			border
			fit
			highlight-current-row
		>
			<el-table-column
				align="center"
				label="日志编号"
				width="80"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.log_id + "" 
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作人账号"
				width="150"
			>
				<template slot-scope="scope">
					{{
						scope.row.user_name || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="登录ip"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.ip || "--" 
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="登录地址"
				width="150"
			>
				<template slot-scope="scope">
					{{
						scope.row.site || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作系统"
				width="150"
			>
				<template slot-scope="scope">
					{{
						scope.row.system || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="浏览器"
				width="150"
			>
				<template slot-scope="scope">
					{{
						scope.row.browser || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="日志状态"
				align="center"
			>
				<template slot-scope="scope">
					<el-tag
						type="primary"
						v-if="scope.row.review_status === 1"
					>
						待审核
					</el-tag>
					<el-tag
						type="info"
						v-if="scope.row.review_status === 2"
					>
						审核中
					</el-tag>
					<el-tag
						type="info"
						v-if="scope.row.review_status === 3"
					>
						审核完毕
					</el-tag>
					<span v-if="
                  scope.row.review_status !== 1 &&
                  scope.row.review_status !== 2
                ">
						--
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="登录时间"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.upload_time 
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="登录状态"
				align="center"
			>
				<template slot-scope="scope">
					{{ 
						scope.row.login_status 
					}}
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="currentPageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="paginationTotal"
		>
		</el-pagination>
	</div>
</template>

<script>
// 引入导出插件XLSX
import { saveAs } from "file-saver";
import XLSX from "xlsx";
// 引入loading
import { Loading } from "element-ui";
// 引入请求
import request from "@/utils/request";

export default {
	data() {
		return {
			// 用户选择时间，0 开始时间  1 结束时间
			dateTime: [],
			//当前页数据
			currentPageData: [],
			// 当前页，默认第一页
			currentPage: 1,
			// 当前页大小，默认每页10条数据
			currentPageSize: 10,
			// 当前数据总数
			paginationTotal: 0,
			// 用户时间选择，提供快捷方式
			pickerOptions: {
				shortcuts: [
					{
						text: "最近5分钟",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 1200 * 1000 * 2 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近1小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 3600 * 1000 * 8 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近3小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(
								start.getTime() - 3600 * 1000 * 24 * 0.5 * 0.5 * 0.5
							);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近6小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 0.5 * 0.5);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近12小时",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 0.5);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近1天",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近三天",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近半个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近6个月",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
							picker.$emit("pick", [start, end]);
						},
					},
					{
						text: "最近一年",
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
							picker.$emit("pick", [start, end]);
						},
					},
				],
			},
		};
	},
	created() {
		// 模块初始化事件入口
		this.init();
	},
	methods: {
		/**
		 * @desc init
		 */
		init() {
			// 获取日志数据
			this.getLogDataList();
		},
		/**
		 * @desc 获取当前日志列表数据
		 */
		getLogDataList() {
			// loading 开启
			const loading = this.$loading({
				lock: true,
				text: "正在加载数据，请耐心等待...",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			let postData = {
				size: this.currentPageSize,
				page: this.currentPage,
				dateTime: this.dateTime,
			};
			request({
				url: "/vue-admin-template/log/list",
				method: "post",
				postData,
			})
				.then((response) => {
					/**
					 * @desc 对返回的数据进行格式整理
					 */
					response.data.list.forEach((element) => {
						// 格式化开始识别时间
						element.create_time = this.formData(
							element.create_time,
							"yyyy-MM-DD HH:mm:ss"
						);
						// 格式化最后更新时间
						element.update_time = this.formData(
							element.update_time,
							"yyyy-MM-DD HH:mm:ss"
						);
					});
					this.currentPageData = response.data.list;
					this.paginationTotal = response.data.total;
					// 关闭loading
					setTimeout(() => {
						loading.close();
					}, 500);
				})
				.catch((err) => {
					// 关闭loading
					setTimeout(() => {
						this.$message({
							message: "错误",
							type: "error",
						});
						loading.close();
					}, 500);
				});
		},
		/**
		 * @desc 时间格式化（时间戳转化为日期）
		 */
		formData(data, format) {
			data = new Date(data);
			let time = {
				"M+": data.getMonth() + 1,
				"D+": data.getDate(),
				"H+": data.getHours(),
				"m+": data.getMinutes(),
				"s+": data.getSeconds(),
			};

			if (/(y+)/i.test(format)) {
				format = format.replace(
					RegExp.$1,
					(data.getFullYear() + "").substr(4 - RegExp.$1.length)
				);
			}

			for (let k in time) {
				if (new RegExp("(" + k + ")").test(format)) {
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1
							? time[k]
							: ("00" + time[k]).substr(("" + time[k]).length)
					);
				}
			}
			return format;
		},
		/**
		 * @desc 监听分页器大小改变
		 */
		handleSizeChange(size) {
			// 更新当前分页器显示总数大小
			this.currentPageSize = size;
			// 刷新数据
			this.init();
		},
		/**
		 * @desc 监听当前页大小改变
		 */
		handleCurrentChange(page) {
			// 更新当前分页器页数
			this.currentPage = page;
			// 刷新数据
			this.init();
		},
		/**
		 * @desc 导出
		 */
		exportLog() {
			// 创建工作簿和工作表
			const wb = XLSX.utils.book_new();
			const ws = XLSX.utils.json_to_sheet(this.courseSortList);
			let xlsx_name =
				"日志数据" +
				this.formData(this.dateTime[0], "yyyy-MM-DD HH:mm:ss") +
				"-" +
				this.formData(this.dateTime[1], "yyyy-MM-DD HH:mm:ss");
			XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

			// 生成Excel文件并保存
			const wbout = XLSX.write(wb, {
				bookType: "xlsx",
				type: "array",
			});
			try {
				saveAs(
					new Blob([wbout], {
						type: "application/octet-stream",
					}),
					"table_data.xlsx"
				);
			} catch (e) {
				if (typeof console !== "undefined") {
					console.log(e, wbout);
				}
			}
			return wbout;
		},
	},
};
</script>
<style lang="scss" scoped>
// 日志管理css入口
.log-list {
	padding: 20px 10px;
}
.header {
	display: flex;
	justify-content: space-between;
	height: 40px !important;
	margin-bottom: 20px;
}
.op {
	display: flex;
	justify-self: start;
}
.collect {
	display: flex;
	justify-content: flex-start;
}
.collect .collect-item {
	margin-right: 20px;
}
.pagination {
	margin-top: 20px;
	float: right;
}
</style>
